import { memo, useState } from "react";
import { FilterWapper } from "./style";
import filterData from "@/assets/data/filter_data.json";
import classNames from "classnames";

const EntireFilter = memo(() => {
  const [selectList, setSelectList] = useState([]);

  function handleSelect(value) {
    const arr = [...selectList];
    // 重复的移除
    if (arr.includes(value)) {
      const index = arr.findIndex((item) => item === value);
      arr.splice(index, 1);
    } else {
      arr.push(value);
    }
    setSelectList(arr);
  }

  return (
    <FilterWapper>
      <div className="filter">
        {filterData.map((item) => {
          return (
            <div className={classNames("item", { active: selectList.includes(item) })} key={item} onClick={() => handleSelect(item)}>
              {item}
            </div>
          );
        })}
      </div>
    </FilterWapper>
  );
});

export default EntireFilter;
